<template>
  <el-container class="layout-container">
    <el-header class="header" height="60px">
      <div class="header-content">
        <div class="left">
          <router-link to="/" class="logo">
            <!-- <img src="@/assets/logo.png" alt="Logo"> -->
            <span class="title">我的博客</span>
          </router-link>
          <nav-menu />
        </div>
        <div class="right">
          <search-input />
          <user-menu />
        </div>
      </div>
    </el-header>
    
    <el-container class="main-container">
      <el-main>
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </el-main>
      
      <el-aside width="300px" class="sidebar">
        <sidebar />
      </el-aside>
    </el-container>
    
    <el-footer height="auto">
      <app-footer />
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import NavMenu from '@/components/layout/NavMenu.vue'
import SearchInput from '@/components/layout/SearchInput.vue'
import UserMenu from '@/components/layout/UserMenu.vue'
import Sidebar from '@/components/layout/Sidebar.vue'
import AppFooter from '@/components/layout/AppFooter.vue'
</script>

<style lang="scss" scoped>
.layout-container {
  min-height: 100vh;
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    
    .header-content {
      max-width: 1200px;
      height: 100%;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .left {
        display: flex;
        align-items: center;
        gap: 40px;
        
        .logo {
          display: flex;
          align-items: center;
          gap: 10px;
          text-decoration: none;
          
          img {
            height: 32px;
          }
          
          .title {
            font-size: 20px;
            font-weight: bold;
            color: $text-primary;
          }
        }
      }
      
      .right {
        display: flex;
        align-items: center;
        gap: 20px;
      }
    }
  }
  
  .main-container {
    margin-top: 60px;
    background-color: #f5f5f5;
    
    .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .sidebar {
      padding: 20px;
    }
  }
}

// 响应式布局
@media (max-width: $breakpoint-lg) {
  .layout-container {
    .main-container {
      flex-direction: column;
      
      .el-aside {
        width: 100% !important;
        order: 2;
      }
    }
  }
}

@media (max-width: $breakpoint-md) {
  .layout-container {
    .header {
      .header-content {
        padding: 0 10px;
        
        .left {
          gap: 20px;
          
          .logo {
            .title {
              display: none;
            }
          }
        }
      }
    }
    
    .main-container {
      .content-wrapper {
        padding: 10px;
      }
      
      .sidebar {
        padding: 10px;
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 